<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="root">
    <h3>{{ num }}</h3>
    <hr>
    <Child1></Child1>
    <hr>
    <Child2></Child2>
  </div>


  <script src="./js/vue.js"></script>
  <script>
    // 事件总线对象
    const bus = new Vue()

    // 子组件
    const Child1 = {
      data() {
        return {
          num: 1
        }
      },
      template: `
        <div>
          Child1：{{ num }}
        </div>
      `,
      mounted() {
        bus.$on('incr', () => {
          this.num++
        })
      }
    }
    // 子组件
    const Child2 = {
      data() {
        return {
          num: 100
        }
      },
      template: `
        <div>
          Child2：{{ num }}
          <br/>
          <button @click="incr">自增一下</button>
        </div>
      `,
      methods: {
        incr() {
          // this.$emit('incr')
          this.num++
          // 通过事件总线完成的通知
          bus.$emit('incr')
        }
      }

    }

    // 父组件
    new Vue({
      el: '#root',
      data: {
        num: 10
      },
      // 局部组件
      components: { Child1, Child2 },
      methods: {
        incr() {
          this.num++
        }
      },
      mounted() {
      //  bus.$on('incr',this.incr)  
      bus.$on('incr',()=>{
        this.num++
      }) 

      }
    })
  </script>
</body>

</html>